<template>
  <section class="smart-bill">
    <process-statistics :data-list="processStatisticsData"/>
    <section class="common-block-section">
      <header class="top-line">
        <div class="search-section">
          <el-input
            placeholder="请输入公司名称进行查询"
            v-model="searchParams.companyName"
            @keyup.enter.native="search"
            @clear="search"
            size="mini"
            suffix-icon="el-icon-search"
            clearable
          >
          </el-input>
          <el-select
            v-model="searchParams.status"
            @blur="search"
            @clear="search"
            clearable
            multiple
            collapse-tags
            size="mini"
            placeholder="状态筛选"
          >
            <el-option
              v-for="item in smartBillStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="searchParams.payTaxesType"
            @change="search"
            @clear="search"
            clearable
            size="mini"
            placeholder="请选择纳税人类型"
          >
            <el-option
              v-for="(item, index) in payTaxesTypeList"
              :key="item"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="searchParams.forceBills"
            @change="search"
            @clear="search"
            clearable
            size="mini"
            placeholder="无核对"
          >
            <el-option
              v-for="item in boolList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </header>
      <type-table
        ref="firstTab"
        name="first"
        :type="0"
        :searchParams="searchParams"
        :activedName="activedName"
      />
      <!-- <el-tabs v-model="activedName" @tab-click="onTabChange" lazy>
        <el-tab-pane label="财务精度" name="first">
          <type-table
            ref="firstTab"
            name="first"
            :type="0"
            :searchParams="searchParams"
            :activedName="activedName"
          />
        </el-tab-pane>
        <el-tab-pane label="税务精度" name="second">
          <type-table
            ref="secondTab"
            name="second"
            :type="1"
            :searchParams="searchParams"
            :activedName="activedName"
          />
        </el-tab-pane>
      </el-tabs> -->
    </section>
  </section>
</template>
<script>
/**
 * @file 智能做账
 */
import processStatistics from "@/components/process-statistics";
import typeTable from "./typeTable";
import map from "@/components/map";
import dataHelper from '@/pages/finance-auto/data.js';

export default {
  components: {
    processStatistics,
    typeTable,
  },
  data() {
    return {
      // 搜索参数
      searchParams: {
        // 公司名称
        companyName: "",
        forceBills: null,
        status: [],
        payTaxesType: "",
      },
      activedName: "first",
      boolList: map.boolList,
      smartBillStatusList: map.accountStatusList.slice(7, 12),
      billStatusList: map.industryList,
      payTaxesTypeList: map.payTaxesTypeList,
      // 进度统计数据
      processStatisticsData: []
    };
  },
  mounted() {
    dataHelper.getData().then(data => {
      this.processStatisticsData = data;
      console.log("统计数据:", data);
    });
  },
  computed: {
    getActived() {
      return this.$refs[`${this.activedName}` + "Tab"];
    },
  },
  methods: {
    handleClick(tab, event) {
    },
    refresh() {
      const tab = this.getActived;
      if (tab) {
        tab.loadData(true);
      }
    },
    search(e) {
      this.$nextTick(() => {
        this.refresh();
      });
    },
    onTabChange(e) {
    }
  },
};
</script>

<style lang="less" scoped>
.top-line {
  padding-bottom: 10px;
  text-align: right;
  > .el-button {
    float: left;
  }
  .search-section {
    .el-select {
      margin-top: 2px;
    }
    .el-input,
    .el-select {
      width: 180px;
    }
  }
}
.smart-bill {
  padding: 0 10px;
  .top-line {
    padding-bottom: 10px;
  }
  .pagination {
    text-align: right;
    padding: 20px 0 0;
  }
}
</style>
